<template>
  <div style="padding-top: 10px; margin-bottom: 2px">
    <a-pagination
      showQuickJumper showSizeChanger
      :showTotal="showTotal" @change="change" @showSizeChange="showSizeChange"
      :current="pagination.current"
      :pageSize="pagination.pageSize"
      :pageSizeOptions="pagination.pageSizeOptions"
      :total="pagination.total"
      size="small"/>
  </div>
</template>
<script>
import {createPagination, createProps} from '@/utils';

export default {
  name: 'RelationSelectorTableFooter',
  props: {
    pagination: createProps(Object, createPagination),
  },
  methods: {
    change(page, pageSize) {
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;
      this.pageChange();
    },
    showSizeChange(current, size) {
      this.pagination.current = current;
      this.pagination.pageSize = size;
      this.pageChange();
    },
    pageChange() {
      this.$emit('pageChange');
    },
    showTotal() {
      return `共 ${this.pagination.total} 条`;
    },
  }
};
</script>